{include file="public/head" /}
    <style>
        .A{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .X{
            background-color: rgb(0, 102, 255);;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 50%;
            border: none;
        }
        .b{
            width: 150px;
            height: 200px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            padding: 5px;
            margin: 5px
        }
        .b img{
            width: 100%;
            height: 100%;

        }
        .lump{
            width: 60%;
            padding: 3vw;
            
            background-color: rgba(30,144,255);
            margin:  2vw auto;
            border-radius: 5px;
            color:white;
            text-align: center
        }
    </style>
  <body>
    <div class="x-body" style="width:30%;float:left;border:2px solid #000">
        <form class="layui-form" style="" method="post" action="">
            
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>楼栋:
                </label>
                <div class="layui-input-inline">
                    <input type="text"  required="" lay-verify="required"
                    autocomplete="off" class="layui-input" style="width: 200px;" value="{$userinfo.building}" readonly>
                </div>
            </div> 
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>单元:
                </label>
                <div class="layui-input-inline">
                    <input type="text"  required="" lay-verify="required"
                    autocomplete="off" class="layui-input" style="width: 200px;" value="{$userinfo.unit}" readonly>
                </div>
            </div> 
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>房号:
                </label>
                <div class="layui-input-inline">
                    <input type="text"  required="" lay-verify="required"
                    autocomplete="off" class="layui-input" style="width: 200px;" value="{$userinfo.room}" readonly>
                </div>
            </div> 
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>姓名:
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="" lay-verify="required"
                    autocomplete="off" class="layui-input" style="width: 200px;" value="{$userinfo.name}" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    <span class="x-red">*</span>手机号:
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="phone" name="phone
                    " required="" lay-verify="required"
                    autocomplete="off" class="layui-input"  value="{$userinfo.phone}" style="width: 200px;" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>关系
                </label>
                <div class="layui-input-inline">
                  {if $userinfo.relation == 0}
                  <input type="text" value="业主" lay-verify="required" style="width: 200px;" readonly class="layui-input">
                  {elseif $userinfo.relation == 1}
                  <input type="text" value="家人" lay-verify="required" style="width: 200px;" readonly class="layui-input">
                  {elseif $userinfo.relation == 2}
                  <input type="text" value="租客"  lay-verify="required" style="width: 200px;" readonly class="layui-input">
                  {elseif $userinfo.relation == 4}
                  <input type="text" value="企业员工"  lay-verify="required" style="width: 200px;" readonly class="layui-input">
                  {elseif $userinfo.relation == 5}
                  <input type="text" value="物业员工"  lay-verify="required" style="width: 200px;" readonly class="layui-input">
                  {/if}  
                </div>
            </div>
            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    <span class="x-red">*</span>IC卡:
                </label>
                <div class="layui-input-inline">
                    <input type="text" 
                    autocomplete="off" class="layui-input"  value="{$userinfo.cardNo}" style="width: 200px;" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    <span class="x-red">*</span>身份证:
                </label>
                <div class="layui-input-inline">
                    <input type="text" 
                    autocomplete="off" class="layui-input"  value="{$userinfo.idCardNo}" style="width: 200px;" readonly>
                </div>
            </div>
            
        </form> 
    </div>

    <div style="width:40%;float:left;width:2px solid green;margin-top:20px">
        <div class="layui-form-item">
                <div class="A">
                    {volist name="data" id="vol"}
                        <div class="b">
                            <button class="X" onclick="quxiao('{$vol['guid']}')">X</button>
                            <img src="{$vol['faceUrl']}" style="border:2px solid grey;border-radius:20px">
                        </div>
                    {/volist}
                </div>
            </div>
            
            <div style="text-align: left;margin-top: 10px;margin-left: 10vw;">
              <b>温馨提示:</b>
              <br>
              1.每个人只能上传3张图片
             
            </div>
            <div class="layui-form-item" style="margin-top:20px"> 
                <label for="L_repass" class="layui-form-label">
                </label>
                {if condition="$num!='3'"}
                <button  class="layui-btn"  onclick="cam('{$userinfo.id}')"  style="width:200px;text-align: center">
                    拍照
                </button>
                {/if}
                
                <!--<button  class="layui-btn" lay-filter="add" onclick="window.location.reload()">
                    刷新
                </button>-->
            </div>
            
    </div>
    <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
            elem: '#start' //指定元素
            ,format: 'yyyyMMdd'
            });

            //执行一个laydate实例
            laydate.render({
            elem: '#end' //指定元素
            ,format: 'yyyyMMdd'
            });
        });
        function cam(id){
           
            var url = "{:url('cam')}?id="+id
            window.location.href=url
        }
        function devreg(){
            if(confirm("已准备就绪，是否采集")){
                var personGuid= "{$userinfo['personGuid']}";
                $.post("{:url('devreg')}",{personGuid:personGuid},function (r) {
                    console.log(r);
                },"json")
            }
            
            
        }
        function devregid(){
            var personGuid= "{$userinfo['personGuid']}";
            $.post("{:url('devregid')}",{personGuid:personGuid},function (r) {
                console.log(r);
            },"json")
            
        }
        function quxiao(e){

            layer.confirm('删除后无法恢复，确定删除吗', function(){
                var personGuid= "{$userinfo['personGuid']}";
                $.post("{:url('delimage')}",{photoid:e,personGuid:personGuid},function (data) {
                    console.log(data);

                    if (data.code=="WO_SUS1000"){
                        window.location.reload();
                        window.parent.location.reload();
                    }else{

                        alert("图片删除失败");
                        window.parent.location.reload();
                        //var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                        //parent.layer.close(index);
                        //window.parent.location.reload();
                    }
                },"json")
            })

        }
    </script>
    <script>
        layui.use(['form'], function() {
            var form = layui.form
            
            form.on('select(group)', function(f){
                
                var url = "{:url('room/getdata')}"
                $.post(url, {group: f.value, type: 1}, function(data) {
                    $('#building').html("")
                    var option = "<option value=''>所有楼栋</option>"
                    $('#building').append(option)
                    for (var i = 0; i < data.length; i++) {
                        option = "<option value='" + data[i] + "'>" + data[i] + "</option>"
                        $('#building').append(option)
                    }
                    $('#group').data('group', f.value)
                    form.render('select')
                })
            })

            form.on('select(building)', function(f){
                var data_group = $('#group').data('group')
                var get_group = "<?php if (isset($group)) { echo $group;}?>"
                var group = typeof data_group === 'undefined' ? get_group : data_group

                var url = "{:url('room/getdata')}"
                $.post(url, {building: f.value,  group: group, type:2}, function(data) {
                $('#unit').html("")
                var option = "<option value=''>所有单元</option>"
                $('#unit').append(option)
                for (var i = 0; i < data.length; i++) {
                    option = "<option value='" + data[i] + "'>" + data[i] + "</option>"
                    $('#unit').append(option)
                }
                $('#building').data('building', f.value)
                form.render('select')
                })
            })

            form.on('select(unit)', function(f){
                var data_group = $('#group').data('group')
                var get_group = "<?php if (isset($group)) { echo $group;}?>"
                var group = typeof data_group === 'undefined' ? get_group : data_group

                var data_building = $('#building').data('building')
                var get_building = "<?php if (isset($building)) { echo $building;}?>"
                var building = typeof data_building === 'undefined' ? get_building : data_building
        
                var url = "{:url('room/getdata')}"
                $.post(url, {unit: f.value, group: group, building: building, type: 3}, function(data) {
                $('#room').html("")
                var option = "<option value=''>所有房间</option>"
                $('#room').append(option)
                for (var i = 0; i < data.length; i++) {
                    option = "<option value='" + data[i] + "'>" + data[i] + "</option>"
                    $('#room').append(option)
                }
                $('#unit').data('unit', f.value)
                form.render('select')
                })
            })

        })
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>

</html>